import React, { useEffect, useState } from 'react';
import { Text, View } from '@tarojs/components';

import './index.scss';

//评价过滤标签
const CommentFilter = ({
  defaultFilter = 0,
  hasPicCount = 0,
  goodCount = 0,
  handleFilter = () => {},
}) => {
  //默认过滤、有图数量，好评数量
  const [filterList, setFilterList] = useState([
    { label: '全部', value: 0 },
    { label: '有图', value: 1, ext: hasPicCount },
    { label: '好评', value: 2, ext: goodCount },
  ]);
  useEffect(() => {
    setFilterList(
      filterList.map((item) => {
        if (item.label == '有图') item.ext = hasPicCount;
        if (item.label == '好评') item.ext = goodCount;
        return item;
      }),
    );
  }, [hasPicCount, goodCount]);
  return (
    <View className="commentFilter">
      {filterList.map((item) => {
        return (
          <View
            key={item.label}
            className={
              defaultFilter == item.value
                ? 'filterItem active customePageBackgroundStyle'
                : 'filterItem'
            }
            onClick={() => handleFilter(item.value)}
          >
            {item.label}
            {item.ext != undefined && <Text className="ext">（{item.ext}）</Text>}
          </View>
        );
      })}
    </View>
  );
};

export default CommentFilter;
